<script setup lang="ts">
import MenuInter from "@/type/menu-inter.ts";
import {reactive, ref, toRaw} from "vue"
import {verifyUserAuthority} from "@/utils/VerifyUserAuthority.ts";
import {useMenuStore} from "@/store";
import {del, post, put} from "@/axios"
import {ElMessage, ElMessageBox} from "element-plus";
import * as ElIcon from '@element-plus/icons-vue';


const menuStore = useMenuStore();
const menuList = menuStore.getMenu
const props = {
  value: 'id',
  icon: 'icon',
  label: 'name',
  children: 'children',
}
const menuForm = reactive<MenuInter>({})
const addMenuItemVis = ref(false)
const iconVisible = ref(false)
const selectIcon = ref("")
const iconList = Object.keys(ElIcon)
const editOrInsert = ref(false)
const editMenuItem = (data: any) => {
  editOrInsert.value = false
  Object.assign(menuForm, toRaw(data))
  addMenuItemVis.value = true
}
const addMenuItemFunc = () => {
  addMenuItemVis.value = true
  editOrInsert.value = true
  Object.assign(menuForm, {
    children:null,
    icon:"",
    id: "",
    name:"",
    parentMenu: null,
    path: "",
    priority:0

  })
}
const deleteMenuItem = (id: string) => {
  verifyUserAuthority().then((res: boolean) => {
    if (res) {
      ElMessageBox.prompt("确认要删除吗？", "提示", {
        confirmButtonText: '确认',
        inputPlaceholder: "请输入“确认”",
        cancelButtonText: '取消',
        type: 'warning',
        inputPattern: /\u786e\u8ba4/,
        inputErrorMessage: "请在输入框内输入“确认”"
      }).then(({value}) => {
        if (value === "确认") {
          del(`/Menu/DeleteMenu?menuId=${id}`).then((res: any) => {
            if (res.status === 200) {
              console.log(res)
              ElMessage.warning("删除成功，需要刷新网页查看效果！")
            }
          })
        }
      }).catch(() => {
        ElMessage.success("你已取消删除！")
      })
    }
  })
}
const selectIconFunc = (icon: string) => {
  selectIcon.value = icon
  menuForm.icon = icon
  iconVisible.value = false;
}
const onSubmit = () => {
  console.log(menuForm)
  console.log(editOrInsert.value)
  if (editOrInsert.value) {
    post("/Menu/AddMenu", menuForm).then((res: any) => {
      if (res.status === 200) {
        ElMessage.success("添加成功,刷新页面后生效")
        addMenuItemVis.value = false
      }
    })
  } else {
    put("/Menu/UpdateMenu", menuForm).then((res: any) => {
      if (res.status === 200) {
        ElMessage.success("修改成功,刷新页面后生效")
        addMenuItemVis.value = false
      }
    })
  }
}
</script>

<template>
  <div class="menu-management-container">
    <div class="menu-management">
      <div class="menu-tree-title">
        <span>菜单列表</span>
        <el-button type="success" @click="addMenuItemFunc" size="small">添加菜单</el-button>
      </div>
      <el-tree-v2
          class="menu-tree"
          :highlight-current="true"
          :data="menuList"
          :props="props"
          :height="420"
      >
        <template #default="{ node,data }">
          <div class="menu-management-tree">
            <div class="menu-tree">
              <div class="menu-tree-node" @mouseup="">
                <div class="menu-node-content">
                    <component style="width: 20px" :is="data.icon"></component>
                  <span class="menu-name">{{ node.label }}</span>
                </div>
                <div class="menu-node-opt">
                  <el-button type="primary" size="small" @click="editMenuItem(data)">编辑</el-button>
                  <el-button type="danger" size="small" @click="deleteMenuItem(data.id)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-tree-v2>
    </div>
  </div>
  <el-dialog v-model="addMenuItemVis"
             :title="editOrInsert? '新增菜单':'编辑菜单'" width="800">
    <el-form
        label-position="left"
        :model="menuForm"
        label-width="auto"
        style="max-width: 600px">
      <el-form-item label="菜单名称">
        <el-input v-model="menuForm.name"/>
      </el-form-item>
      <el-form-item label="菜单优先级">
        <el-input v-model="menuForm.priority"/>
      </el-form-item>
      <el-form-item label="路由/路径">
        <el-input v-model="menuForm.path"/>
      </el-form-item>
      <el-form-item label="父级菜单">
        <el-select v-model="menuForm.parentMenu" placeholder="Select" style="width: 240px">
          <el-option
              v-for="item in menuList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          >
<!--            <div>-->
<!--              <span style="float: left">{{ item.label }}</span>-->
<!--              <span>{{ item.name }}</span>-->
<!--            </div>-->
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择Icon">
        <el-button type="primary" size="small" @click="iconVisible = true">选择icon</el-button>
        <div class="icon-preview">
          <component class="selectedIcon" :is="editOrInsert? selectIcon:menuForm.icon"></component>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="addMenuItemVis = false ">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        v-model="iconVisible"
        width="500"
        title="Icon 合集"
        append-to-body
    >
      <div class="icon-container">
        <div class="icon-list">
          <div class="icon-item" v-for="icon in iconList">
            <component color="#409EFF" :is="icon" @click="selectIconFunc(icon)"></component>
            <span>{{ icon }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<style scoped>
.menu-management-container {
  width: 100%;
  height: 100%;
  background-color: white;
}

.menu-management {
  width: 100%;
  height: 100%;
}

.menu-tree-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}

.menu-tree-title span {
  font-size: 25px;
  font-family: 楷体;
  padding: 10px 10px;
}

.menu-tree {
  padding: 10px 10px;
}

.menu-management-tree {
  width: 100%;
}

.menu-node-content {
  width: 100%;
}

.menu-node-opt {
  margin-right: 40px;
}

.menu-tree-node {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.menu-name {
  font-size: 18px;
}

.icon-list {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

.icon-preview {
  font-size: 17px;
  width: 30px;
  height: 30px;
}

.icon-item span {
  font-size: 11px;
}
</style>
